import React, { Component } from 'react'
import '../../assets/css/three.css'
import '../../assets/css/home.css'
import { getnew, getcountdown, getgroupon, getseckill, getindexgoods, getcoupon, cartadd } from '../../request/api'
import { Tabs } from 'antd';
import { Toast } from 'antd-mobile';

const { TabPane } = Tabs;
export default class home extends Component {
    constructor() {
        super()
        this.state = {
            xrzx: [],
            time: '',
            h: '',
            m: '',
            s: '',
            wrt: [],
            xsms: [],
            list: [],
            tim2: '',
            tim1: ''
        }
    }

    componentDidMount() {
        this.xr()
        this.js()
        this.yhq()

        //倒计时
        this.time2 = setTimeout(() => {
            this.time1 = setInterval(() => {
                let a = this.djs(this.state.time - 1000)
                //    console.log(a);
                this.setState({ h: a.hours })
                this.setState({ m: a.minute })
                this.setState({ s: a.second })
            }, 1000);

        }, 1000)
        //万人团

        this.wrt()
        this.xsma()
        this.list()


    }
    //新人专享
    xr() {
        getnew().then(res => {
            this.setState({ xrzx: res.list })
        })
    }
    //倒计时
    js() {
        getcountdown().then(res => {
            console.log(res);
            if (res.list != null) {
                console.log(res.list[0].endtime);
                this.setState({ time: res.list[0].endtime })
            }

        })


    }
    //优惠券
    yhq() {
        if (JSON.parse(sessionStorage.getItem('user')) == null) {

        } else {
            let a = JSON.parse(sessionStorage.getItem('user')).uid
            // console.log(a);
            getcoupon({ uid: a }).then(res => {
                // console.log(res);
            })
        }
    }

    djs(tar_time) {
        var target = tar_time - new Date();
        var time = parseInt((target) / 1000);
        var day = parseInt(time / 86400);
        var hours = parseInt(time % 86400 / 3600);
        var minute = parseInt(time % 3600 / 60);
        var second = parseInt(time % 60);
        console.log(hours);
        if (hours < 10) { hours = '0' + hours }
        if (minute < 10) { minute = '0' + minute }
        if (second < 10) { second = '0' + second }


        return { hours, minute, second }
    }
    //万人团
    wrt() {
        getgroupon().then(res => {
            // console.log(res);
            this.setState({ wrt: res.list })
            // console.log(this.state.wrt);
        })
    }
    //显示秒杀
    xsma() {
        getseckill().then(res => {
            this.setState({ xsms: res.list })
        })
        // console.log(this.state.xsms);
    }

    list() {

        getindexgoods().then(res => {
            this.setState({ list: res.list })
        })

    }

    catr(id, b) {
        if (JSON.parse(sessionStorage.getItem('user')) == null) {

            this.props.history.push('/login')
        } else {
            let uid = JSON.parse(sessionStorage.getItem('user')).uid
            let a = {
                uid,
                type: b,
                goodsid: id,
                num: 1
            }
            cartadd(a).then(res => {
                if (res.code == 200) {
                    Toast.success('添加成功', 1);
                }
            })
        }
    }
    componentWillUnmount() {
        clearInterval(this.time1)
        clearTimeout(this.time2)
    }
    coupon() {
        this.props.history.push('/coupon')
    }
    render() {
        // console.log(this.state.wrt!==[]);

        return (
            <div className='box'>
                <div className='nav-bar'>
                    <div className='nav-bar-left'>
                        <img src="/img/piclogowhite.png" alt="" />
                    </div>
                    <div className='middle'>
                        <i className='iconfont icon-fangdajing'></i>
                        <input placeholder='搜索' type="text" name="" id="" />
                        <span>搜索</span>
                    </div>
                    <div className='right'>
                        <i className='iconfont icon-Frame1'></i>
                    </div>

                </div>
                <div className='xrzx'>
                    <div className='xrzx-top'>
                        <span className='left'>新人专享</span>
                        <div className='time'>
                            <i>{this.state.h}</i>
                            <b>:</b>
                            <i>{this.state.m}</i>
                            <b>:</b>
                            <i>{this.state.s}</i>
                        </div>
                        <div className='right'>
                            <span  >查看全部&gt;</span>
                        </div>
                    </div>
                    <div className='middle'>
                        <div className='m-top'>
                            <span>1重礼</span>
                            <i>信任特价商品专区（限量供应，先到先得）</i>
                        </div>
                        <div className='m-bootm'>
                            <ul>
                                {
                                    this.state.xrzx.map(ele => (
                                        <li key={ele.id}>
                                            <img src={ele.img} alt="" />
                                            <p>{ele.price}</p>
                                            <p><s>{ele.market_price}</s></p>
                                            <span >加入购物车</span>
                                        </li>
                                    ))
                                }

                            </ul>
                        </div>

                    </div>
                    <div className='v-bottom'>
                        <div className='m-top'>
                            <span>1重礼</span>
                            <i>信任特价商品专区（限量供应，先到先得）</i>
                        </div>
                        <div className='yhq'>
                            <img src="/img/yhj1.png" onClick={() => this.coupon()} alt="" />
                            <img src="/img/yhj2.png" onClick={() => this.coupon()} alt="" />
                        </div>
                    </div>
                </div>
                <div className='middle-nav'>
                    <div>
                        <img src="img/1.png" alt="" />
                        <p>秒杀</p>
                    </div>
                    <div><img src="img/2.png" alt="" />
                        <p>畅销商品</p></div>
                    <div><img src="img/hot.png" alt="" />
                        <p>小U自营</p></div>
                    <div><img src="img/3.png" alt="" />
                        <p>赚积分</p>
                    </div>



                </div>
                <div className='cjms'>
                    <div className='cjms-top'>
                        <span className='left'>超级秒杀</span>
                        <div className='time'>
                            <i>{this.state.h}</i>
                            <b>:</b>
                            <i>{this.state.m}</i>
                            <b>:</b>
                            <i>{this.state.s}</i>
                        </div>

                    </div>
                    <div className="cont">

                        <div className='imgs'>
                            <img src={this.state.wrt.length == 0 ? '/img/bf9cad135fd8a46fec87d33ea75a1ed8a28eab08e1ecb-vzkS04_fw1200.jpg' : this.state.wrt[0].img} alt="" />
                        </div>
                        <div className='c-right'>
                            <p>{this.state.wrt.length == 0 ? '' : this.state.wrt[0].goodsname}</p>
                            <div className='btn'>
                                <span>100</span>
                                <span>199</span>
                                <div className='qg' onClick={() => this.catr(this.state.wrt[0].id, 2)}>马上抢</div>
                            </div>
                        </div>


                    </div>
                </div>
                {/* 限时秒杀 */}
                <div className='xsms'>
                    <div className='middle'>
                        <div className='m-top'>
                            <span>限时秒杀</span>
                            <i>信任特价商品专区（限量供应，先到先得）</i>
                        </div>
                        <div className='m-bootm'>
                            <ul>
                                {
                                    this.state.xsms.length != 0 ? this.state.xsms.map(ele => (
                                        <li key={ele.id}>
                                            <img src={ele.img} alt="" />
                                            <p>{ele.price}</p>
                                            <p><s>{ele.market_price}</s></p>
                                            <span >加入购物车</span>
                                        </li>
                                    )) : ''
                                }


                            </ul>
                        </div>

                    </div>
                </div>
                {/* 双十一 */}
                <div className='s11'>
                    <div className='s-left'>
                        <div className="top">双11尖货预约</div>
                        <img src="img/cardplateindexkingkongbig@3x.png" alt="" />
                    </div>
                    <div className='s-right'>
                        <div className="top">畅购全球</div>
                        <img src="/img/picplateindexkingkongbig@3x.png" alt="" />
                        <img src="/img/cardplateindexkingkongbig-zEr2mN_fw1200@3x.png" alt="" />
                    </div>
                </div>

                <Tabs defaultActiveKey="1" onChange={this.callback}>
                    <TabPane tab="热销好货" key="1">
                        <div>
                            <ul className='three-router'>
                                {
                                    this.state.list.length != 0 ? this.state.list[0].content.map(ele => (
                                        <li key={ele.id}>
                                            <div className='left'>
                                                <img src={ele.img} alt="" />
                                            </div>
                                            <div className='right'>
                                                <p>{ele.goodsname}</p>
                                                <div className='price'>
                                                    <span>{ele.price}</span><br />
                                                    <s>{ele.market_price}</s>
                                                </div>
                                                <div className='catr' onClick={() => this.catr(ele.id, 1)}>加入购物车</div>
                                            </div>
                                        </li>
                                    )) : '1'
                                }

                            </ul>
                        </div>
                    </TabPane>
                    <TabPane tab="折上折区" key="2">
                        <div>
                            <ul className='three-router'>
                                {
                                    this.state.list.length != 0 ? this.state.list[1].content.map(ele => (
                                        <li key={ele.id}>
                                            <div className='left'>
                                                <img src={ele.img} alt="" />
                                            </div>
                                            <div className='right'>
                                                <p>{ele.goodsname}</p>
                                                <div className='price'>
                                                    <span>{ele.price}</span><br />
                                                    <s>{ele.market_price}</s>
                                                </div>
                                                <div className='catr' onClick={() => this.catr(ele.id, 1)}>加入购物车</div>
                                            </div>
                                        </li>
                                    )) : '1'
                                }

                            </ul>
                        </div>
                    </TabPane>
                    <TabPane tab="时令水果" key="3">
                        <div>
                            <ul className='three-router'>
                                {
                                    this.state.list.length != 0 ? this.state.list[2].content.map(ele => (
                                        <li key={ele.id}>
                                            <div className='left'>
                                                <img src={ele.img} alt="" />
                                            </div>
                                            <div className='right'>
                                                <p>{ele.goodsname}</p>
                                                <div className='price'>
                                                    <span>{ele.price}</span><br />
                                                    <s>{ele.market_price}</s>
                                                </div>
                                                <div className='catr' onClick={() => this.catr(ele.id, 1)}>加入购物车</div>
                                            </div>
                                        </li>
                                    )) : '1'
                                }

                            </ul>
                        </div>
                    </TabPane>
                    <TabPane tab="粮油调味" key="4">
                        <div>
                            <ul className='three-router'>
                                {
                                    this.state.list.length != 0 ? this.state.list[3].content.map(ele => (
                                        <li key={ele.id}>
                                            <div className='left'>
                                                <img src={ele.img} alt="" />
                                            </div>
                                            <div className='right'>
                                                <p>{ele.goodsname}</p>
                                                <div className='price'>
                                                    <span>{ele.price}</span><br />
                                                    <s>{ele.market_price}</s>
                                                </div>
                                                <div className='catr' onClick={() => this.catr(ele.id, 1)}>加入购物车</div>
                                            </div>
                                        </li>
                                    )) : '1'
                                }

                            </ul>
                        </div>
                    </TabPane>
                </Tabs>
            </div>


        )
    }
    callback(key) {
        // console.log(key);
    }
}
